<script setup>
import { onMounted, provide, ref } from 'vue';
import SonCom from './components/SonCom.vue';

// 2. Vue3 组合式 API 中没有了 this，需要创建 ref 来获取dom节点
const h1ref = ref(null)

// 组件挂载完毕后，获取 DOM 节点
onMounted(()=>{
  console.log(h1ref.value)
})

const getDOM = ()=>{
  console.log(h1ref.value);
}

const message = ref('Hello Vue3')
const sonComRef = ref(null)
const getSonCom = ()=>{
  sonComRef.value.validate()
}


// -----------------------------
provide('myMsg', message)
provide('myStr', '哈哈哈')
provide('setMyMsg', ()=>{
  message.value += '🙃'
})
</script>

<template>
  <!-- 1. 给组件添加ref属性，用于获取dom节点 -->
<h1 ref="h1ref">Hello Vue3</h1>
<button @click="getDOM">点击获取</button>
<SonCom :msg="message" ref="sonComRef"/>
<button @click="getSonCom">获取组件实例</button>
<button @click="message += '￥'">修改数据</button>
</template>

<style scoped>
/* 样式 */

</style>
